/*
vue插件 注册项目所有的全局指令
 */
// 导入出错显示的默认图片
import DefImg from '@/assets/images/200.png'
// 正在加载图片
import LoadImg from '@/assets/images/load.gif'
import { useIntersectionObserver } from '@vueuse/core'
export default {
  install (app) {
    // console.log(app)
    app.config.globalProperties.load = LoadImg
    // 注册
    app.directive('my-directive', {
      // 指令是具有一组生命周期的钩子：
      // 在绑定元素的 attribute 或事件监听器被应用之前调用
      created () { },
      // 在绑定元素的父组件挂载之前调用
      beforeMount () { },
      // 绑定元素的父组件被挂载时调用
      // el绑定指令的元素 binding 指令绑定的值
      mounted (el, binding) {
        // console.log(el, binding)
        // 实现图片进入可视区域,才渲染
        // 1组件中图片,不直接给src 2 src值给指令绑定3进入可视区src才渲染
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // 参数1是个数据:结构出数组中对象isIntersecting的值(boorlean)
            // console.log(isIntersecting)
            if (isIntersecting) {
              setTimeout(() => {
                // 发请求
                // getNew()
                el.src = binding.value
              }, 3000)

              //  可能出现破图,给个默认图片
              el.onerror = () => {
                el.src = DefImg
              }
              // 只发一次
              stop()
            }
          },
          // 刚进入视口区域就立刻执行回调 0 - 1
          { threshold: 0 }
        )
      },
      // 在包含组件的 VNode 更新之前调用
      beforeUpdate () { },
      // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
      updated () { },
      // 在绑定元素的父组件卸载之前调用
      beforeUnmount () { },
      // 卸载绑定元素的父组件时调用
      unmounted () { }
    })
  }
}
